<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画函数的使用</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			a {
				text-decoration: none;
				color: #000;
			}
			.aside {
				position: fixed;
				top: 500px;
				right: 0;
				width: 50px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				background-color: purple;
				z-index: 999;
			}
			.aside a {
				display: block;
				width: 100%;
				height: 100%;
				background-color: purple;
			}
			.slide {
				position: absolute;
				top: 0;
				left: 0;
				width: 210px;
				height: 50px;
				line-height: 50px;
				text-align: left;
				background-color: pink;
				z-index: -2;
			}
		</style>
	</head>
	<body>
		<div class="aside">
			<a href="javascript:;">👈</a>
			<div class="slide">
				缓冲动画,回调
			</div>
		</div>
		
		<script type="text/javascript">
			
			var div = document.querySelector('.aside div');
			var as = document.querySelector('.aside a');
			//定义动画函数
			function animate(obj,target,callback) {
				//清除之前的定时器，只保留当前的定时器
				clearInterval(obj.timer)
				obj.timer = setInterval(function() {
					var space = (target - obj.offsetLeft) / 10;
					space = space > 0 ? Math.ceil(space) : Math.floor(space);
					if(obj.offsetLeft == target) {
						//停止运动
						clearInterval(obj.timer);
						if(callback){
							callback();
						}
					}
					obj.style.left = obj.offsetLeft + space + 'px'
				},15)
				
			}
			as.addEventListener('mouseenter',function() {
				animate(div,-160,() => {
				console.log('111')
				as.innerHTML = '👉'
				})
			})
			as.addEventListener('mouseleave',function() {
				animate(div,0,() => {
					as.innerHTML = '👈'
				})
			})
		
		</script>
	</body>
</html>
